<script setup lang="ts">
	import { ref } from 'vue'
	import { route } from '@/uni_modules/uview-plus'
	import { useNotify } from '@/hooks/web/useNotify/index.js'
	import { account } from '@/api/home/index'

	// 消息弹窗
	const NotifyRef = ref<any>(null)
	const { showNotify } = useNotify(NotifyRef)

	const paging = ref<ZPagingInstance>()
	const useCURD = () => {
		const dataList = ref([])
		const money = ref({})

		const getList : ZPagingEvent.Query = async (page, limit) => {
			const params = { page, limit }
			try {
				const res = await account(params)
				money.value = res.data.money
				paging.value?.complete([...res.data.list.data])
			} catch (err) {
				showNotify({
					type: 'error',
					message: err.msg
				})
				paging.value?.complete(false)
			}
		}

		const searchAction = () => {
			paging.value?.reload()
		}

		return {
			dataList,
			getList,
			searchAction,
			money
		}
	}
	const { dataList, getList, searchAction, money } = useCURD()

	// 跳转页面
	const toPage = (url : string) => {
		route({
			url
		})
	}
</script>

<template>
	<view class="content">
		<view class="main-mixn">
			<view style="display: flex;justify-content: space-between;">
				<view>
					<view class="mixn-name">账户总额（元）</view>
					<view class="mixn-text">{{money?.total_money}}</view>
				</view>
				<view>
					<view class="mixn-name" @click="toPage('/pages/Dalance/detail')">查看明细</view>
				</view>
			</view>
			<view class="mixn-line"></view>
			<view class="mixn-foot1">
				<view class="foot-box">
					<view class="foot-name">待结算</view>
					<view class="foot-text">{{money?.no_settled}}</view>
				</view>
				<view class="foot-box">
					<view class="foot-name">已结算</view>
					<view class="foot-text">{{money?.settled}}</view>
				</view>
			</view>
		</view>
		<view class="con-name">收款记录</view>
		<z-paging ref="paging" v-model="dataList" @query="getList" :fixed="false" height="calc(100vh - 300rpx)">
			<view class="mian-box" v-for="(item,index) in dataList" :key="index">
				<view class="box-header">
					<view class="header-left">
						<view class="left-name">结算分账</view>
					</view>
					<view class="header-right">￥{{item.amount}}</view>
				</view>
				<view class="box-line"></view>
				<view class="box-foot">
					<view class="foot-name">时间：<text style="color: rgba(2, 14, 36, 1);">{{item.create_time}}</text>
					</view>
					<view class="foot-name">备注：<text style="color: rgba(2, 14, 36, 1);">{{item.remark}}</text></view>
				</view>
			</view>
		</z-paging>
		<up-notify ref="NotifyRef"></up-notify>
	</view>
</template>

<style scoped lang="scss">
	.content {
		width: 100%;
		height: 100vh;
		background: rgba(242, 243, 245, 1);
		padding-top: 30rpx;
		box-sizing: border-box;


		.main-mixn {
			width: 702rpx;
			// height: 266rpx;
			border-radius: 12rpx;
			background: linear-gradient(133.54deg, rgba(15, 127, 255, 1) 0%, rgba(93, 162, 240, 1) 100%);
			box-shadow: 8rpx 4rpx 22rpx rgba(55, 131, 252, 0.2);
			margin-left: 24rpx;
			padding: 30rpx;
			box-sizing: border-box;

			.mixn-name {
				font-size: 26rpx;
				font-weight: 500;
				color: rgba(255, 255, 255, 0.8);
				margin-bottom: 20rpx;
			}

			.mixn-text {
				font-size: 40rpx;
				font-weight: 400;
				color: rgba(255, 255, 255, 1);
			}

			.mixn-line {
				width: 658rpx;
				height: 2rpx;
				background: rgba(255, 255, 255, 0.1);
				margin: 20rpx 0rpx;
			}

			.mixn-foot1 {
				display: flex;
				margin-top: 20rpx;

				.foot-box {
					margin-right: 90rpx;

					.foot-name {
						font-size: 24rpx;
						font-weight: 500;
						color: rgba(255, 255, 255, 1);
					}

					.foot-text {
						font-size: 28rpx;
						font-weight: 700;
						color: rgba(255, 255, 255, 1);
						margin-top: 10rpx;
					}
				}
			}
		}

		.con-name {
			font-size: 28rpx;
			font-weight: 700;
			color: rgba(2, 14, 36, 1);
			padding: 30rpx;
		}

		.mian-box {
			width: 100%;
			// height: 200rpx;
			border-radius: 12rpx;
			background: rgba(255, 255, 255, 1);
			box-shadow: 8rpx 4rpx 22rpx rgba(55, 131, 252, 0.05);
			padding: 30rpx;
			box-sizing: border-box;
			margin-bottom: 40rpx;

			.box-header {
				display: flex;
				justify-content: space-between;
				margin-bottom: 30rpx;

				.header-left {
					display: flex;
					align-items: center;
					justify-content: flex-start;

					.left-name {
						font-size: 28rpx;
						font-weight: 500;
						color: rgba(2, 14, 36, 1);
					}
				}

				.header-right {
					font-size: 32rpx;
					font-weight: 400;
					color: rgba(245, 99, 81, 1);
				}
			}

			.box-line {
				width: 702rpx;
				height: 2rpx;
				background: rgba(0, 0, 0, 0.1);
			}

			.box-foot {
				margin-top: 30rpx;


				.foot-name {
					font-size: 24rpx;
					font-weight: 500;
					color: rgba(100, 101, 102, 1);
					margin-bottom: 20rpx;
				}

			}
		}
	}
</style>